<div class="order-wrap">
  <div class="header-wrap">
    <div class="main-header">
      <div class="head-title">
        <img src="../../../assets/favicon.ico" alt="" class="title-logo">
        <div class="title-line"></div>
        <div class="title-icon">
          <i  class=" icon-homepage"></i>
        </div>
        <span class="title-text">部门：{{departname}}</span>
        <div class="title-line"></div>
        <div class="title-icon">
          <i  class=" icon-infrastructure"></i>
        </div>
        <span class="title-text">工号：{{this.jobNumber}}</span>
      </div>
      <div class="head-user">
        <img [src]="this.headUrl" alt="" class="user-img">
        <div>
          <div class="user-name">{{name}}</div>
        </div>
        <div class="user-line"></div>
        <div class="user-logout" (click)="logout()">
          <img src="../../../assets/img/icon/icon_quit@3x.png" alt="" class="logout-img">
          <div class="logout-text">
            退出
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content-wrap">
    <div class="content-head">
      <div class="head-tab">

          <div class="tab-item" *ngFor="let tab of tabs" [class.active]="selectedTab === tab" (click)="selectTab(tab)">
            <d-badge [count]="getStatusNumber(tab)" [status]="getStatus(tab)">{{tab}}</d-badge>
          </div>

      </div>
      <!-- <div class="head-btn">批量报工</div> -->
      <div class="head-btn" (click)="reportHistories()">报工记录</div>
    </div>
    <div class="content-items">
      <div class="list-item" *ngFor="let item of this.data" (click)="detail(item)">
        <div class="list-line" [class.status-start-line]="item.isStart&&!item.isFinished"
          [class.status-end-line]="item.isFinished" [class.status-paused-line]="item.isPause"></div>
        <div class="list-top " [class.status-start-list]="item.isStart&&!item.isFinished"
          [class.status-end-list]="item.isFinished" [class.status-paused-list]="item.isPause">
          <div class="order-info">
            <div class="order-info-items">
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>工单号：{{item.jobOrderNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>销售单号：{{item.saleOrderNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>工序序号：{{item.processNumber}}</span>
                </div>
                <div class="order-info-item">
                  <span>工序编码：{{item.processNum}}</span>
                </div>
              </div>
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>工序：{{item.processName}}</span>
                </div>
                <div class="order-info-item">
                  <span>产品编码：{{item.productNum}}</span>
                </div>
                <div class="order-info-item">
                  <span>产品名称：{{item.productName}}</span>
                </div>
                <div class="order-info-item">
                  <span>操作工：<span *ngFor="let a of item.users; let isLast=last">{{a.name}}{{isLast ? '' :
                      ','}}</span></span>
                </div>
                <!-- <div class="order-info-item">
                  <span>设备：—</span>
                </div> -->
              </div>
              <div class="order-info-items-row">
                <div class="order-info-item">
                  <span>计划开始时间：{{item.planStartTime | date:'YYYY-MM-dd HH:mm:ss'}}</span>
                </div>
                <div class="order-info-item">
                  <span>计划结束时间：{{item.planFinishTime | date:'YYYY-MM-dd HH:mm:ss'}}</span>
                </div>
                <div class="order-info-item">
                  <span>开工时间：{{item.actualStartTime}}</span>
                </div>
                <div class="order-info-item">
                  <span>报工时间：{{item.actualFinishTime}}</span>
                </div>
              </div>
            </div>
            <div class="order-status" [class.status-start-color]="item.isStart&&!item.isFinished"
              [class.status-end-color]="item.isFinished" [class.status-paused-color]="item.isPause">
              <div class="status-number">
                <span>{{(item.qualifiedAmount/item.productionQuantity)*100 | number:'1.0-2'}}%</span>
              </div>
              <div class="status-label">
                <span *ngIf="!item.isStart&&!item.isPause&&!item.isFinished">未开工</span>
                <span *ngIf="item.isStart&&!item.isFinished&&!item.isPause">已开工</span>
                <span *ngIf="item.isFinished">已完工</span>
                <span *ngIf="item.isPause">暂停</span>
              </div>
            </div>
          </div>
        </div>
        <div class="list-bot">
          <div class="order-progress">
            <div class="progress-item-title">
              报工数量：
            </div>
            <div class="progress-item-progress">
              <d-progress [percentage]="(item.qualifiedAmount/item.productionQuantity)*100">
                <ng-template [dPosition]="'center'">
                  <div class="overflow-ellipsis" [title]="item.qualifiedAmount+'/'+ item.productionQuantity">{{ item.qualifiedAmount }}/{{item.productionQuantity}}</div>
                </ng-template>
              </d-progress>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-wrap">
    <div class="footer-items">
      <div class="footer-item" *ngFor="let item of footerItems" [class.active]="selectedFooterItem === item" (click)="selectFooterItem(item)">{{item}}</div>
    </div>
    <div class="footer-time">{{this.now | date:'yyyy年MM月dd日 HH:mm:ss'}}</div>
   </div>
</div>
